<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>长按截图Demo</title>
    <script src="../js/html2canvas.js"></script>
    <script src="../js/canvas2image.js"></script>
    <script src="../js/base64.js"></script>
    <style>
        #content{
            border-radius: 3px;
        }
        .myword{
            color: green;
            border: 1px solid gray;
            border-radius: 3px;
            text-align: center;
            margin-left: 26px;
            margin-top: 10px;
            float: left;
            padding: 5px;
        }
        .ah{
            display: block;
            text-align: center;
            color: #666;
        }
        #btnSave,#Download{
            margin: 10px 0 10px 26px;
        }
        .tx,.bt{
            border: 1px solid #999;
            width: 100px;
            height: 20px;
            margin-left: 26px;
            margin-bottom: 10px;
            border-radius: 3px;
        }
        .bt{
            background-color: #333;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
<div id=content style="width:150px;height:200px;border:1px gray solid">
    <span class="myword">Hello world</span>
    <br>
    <span class="ah"><h2>这里是文本</h2></span>
    <input type="text" class="tx">
    <br />
    <input type="button" class="bt" value="提交">
</div>
<button id="btnSave">长按转换成图片</button>
<div id="images"></div>
<!--<button id="Download">Download</button>-->
<script src="../js/jquery-3.0.0.min.js"></script>
<script>
    $(document).ready(function(){
        var lastTime=null,nowTime=null;
        $('#content').on({
            touchstart: function(e){
                lastTime=new Date().getTime();
                e.preventDefault();
            },
            touchmove: function(e){
                e.preventDefault();
            },
            touchend: function(e){
                e.preventDefault();
                nowTime=new Date().getTime();
                var timeLength=nowTime-lastTime;
                if(timeLength>500){
                    touchLoop('#content');
                }
                return false;
            }
        });
    });
    function touchLoop(objId) {
        document.body.scrollTop = 0;
        var obj = $(objId),
                width = obj.offsetWidth,
                height = obj.offsetHeight;
        html2canvas(obj,{
            width:width,
            height:height,
            background:"rgba(255,255,255,1)",
            onrendered:function(canvas){
                var url = canvas.toDataURL();
                console.log(url);
                var div=$('<div id="sive_img"></div>');
                div.html('<img src="'+url+'">');
                $('body').append(div);
                $('#sive_img').on('click',function(){
                    $('#sive_img').remove();
                })
            }
        })
    }
</script>
</body>
</html>